<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="mall/advert/include::header"></head>
<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>大礼包商品编辑</h5>
					</div>
					<div class="ibox-content">
						<form class="form-horizontal m-t" id="signupForm">
							<input type="hidden" name="id" id="id" th:value="${freeCharge.id}">

							<div class="form-group">
								<label class="col-sm-3 control-label">商品名称:</label>
								<div class="col-sm-8">
									<input id="title" name="title" type="text" th:value="${freeCharge.title}" class="form-control">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">商品份数:</label>
								<div class="col-sm-8">
									<input id="count" name="count" class="form-control" type="number" th:value="${freeCharge.count}" min="0" placeholder="">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">商品原价:</label>
								<div class="col-sm-8">
									<input id="price" name="price" class="form-control" type="number" th:value="${freeCharge.price}" min="0" placeholder="">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">商品成本价:</label>
								<div class="col-sm-8">
									<input id="costPrice" name="costPrice" class="form-control" type="number" th:value="${freeCharge.costPrice}" min="0" placeholder="">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">商品图片:</label>
								<div class="col-sm-6">
									<input id="img" name="img" class="form-control" type="text" onblur="onThumbBlur()" th:value="${freeCharge.img}">
								</div>
								<div class="col-sm-2">
									<button type="button" onclick="onSelectImgBtnClick('img','thumbImg')" class="btn btn-primary"><i class="fa fa-check"></i>选择图片</button>
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-8">
									<label class="col-sm-5 control-label">-</label>
									<img class="img-responsive" id="thumbImg" src="" style="max-width: 30%" th:attr="src=${freeCharge.img}">
								</div>
							</div>


							<div class="tab-pane" id="tab_des">
								<div class="form-group">
									<label class="col-sm-2 control-label no-padding-right"
										   for="form-field-1">商品详情</label>
									<div class="col-sm-10">
									<textarea id="description" name="description" style="height: 200px;"
											  th:text="${freeCharge.description}"></textarea>
									</div>

								</div>

							</div>

							<div class="form-group text-center">
								<div class="col-sm-8 col-sm-offset-2">
									<button type="submit" class="btn btn-primary"><i class="fa fa-check"></i>提交</button>
									<div class="btn btn-danger" onclick="closeDow()"><i class="fa fa-remove"></i> 关闭</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div th:include="mall/advert/include::footer"></div>
	<script src="/js/appjs/store/freecharge/freechargeedit.js"></script>
	<script type="text/javascript" src="/js/ueditor/ueditor.config.js"></script>
	<script type="text/javascript" src="/js/ueditor/ueditor.all.min.js"></script>
	<script type="text/javascript" src="/js/ueditor/lang/zh-cn/zh-cn.js"></script>
	<script type="text/javascript" src="/js/ueditor/custom.js?v=2"></script>
	<script type="text/javascript" src="/js/appjs/product/AreaData.js"></script>
	<script type="text/javascript" src="/public/ace/js/ace-extra.js"></script>
	<script type="text/javascript" src="/js/plugins/layui/layui.js"></script>
	<script type="text/javascript" src="/js/plugins/layer/layer.js"></script>
	<script type="text/javascript" src="/js/bootstrap.min.js"></script>
	<script src="/js/jquery-select/jquery.searchableSelect.js"></script>
	<script type="text/javascript" src="/js/plugins/layui/layui.js"></script>
	<script type="text/javascript">
		function closeDow() {
			var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
			parent.layer.close(index);
		}

		$(function () {
			// tab切换
			$('#myTab a').click(function (e) {
				e.preventDefault();
				$('#myTab li').each(function () {
					$(this).removeClass('active')
				})
				$('.tab-content .tab-pane').each(function () {
					$(this).removeClass('active')
				})
				$(this).parent().addClass('active')
				id = $(this).attr('href')
				$(id).addClass('active');
			});
			packageCouponListTableTableReload();
			joinProductListTableTableReload();
		})

		var ue = UE.getEditor('content');
		$('#content').data('editor', ue);
		$('#content').parents('form').submit(function () {
			if (ue.queryCommandState('source')) {
				ue.execCommand('source');
			}
		});

		var discountRuleUe = UE.getEditor('discountRule');
		$('#discountRule').data('editor', discountRuleUe);
		$('#discountRule').parents('form').submit(function () {
			if (discountRuleUe.queryCommandState('source')) {
				discountRuleUe.execCommand('source');
			}
		});

		var shopEnvUe = UE.getEditor('shopEnv');
		$('#shopEnv').data('editor', shopEnvUe);
		$('#shopEnv').parents('form').submit(function () {
			if (shopEnvUe.queryCommandState('source')) {
				shopEnvUe.execCommand('source');
			}
		});

		var descriptionUe = UE.getEditor('description');
		$('#description').data('editor', descriptionUe);
		$('#description').parents('form').submit(function () {
			if (descriptionUe.queryCommandState('source')) {
				descriptionUe.execCommand('source');
			}
		});

		UE.registerUI('uploadImage', function (editor, uiName) {
			return new UE.ui.Button({
				name: '上传图片',
				title: '上传图片',
				cssRules: 'background-position:-380px 0',
				onclick: function () {
					layer.open({
						id: 'selectImgs',
						type: 2,
						title: '批量选择图片',
						maxmin: true,
						shadeClose: false,
						area: ['60%', '70%'],
						content: '/platform/config/batchUploadImgUeditor?inputId=' + editor.key  // iframe的url
					});
				}
			});
		});

		// 加载图片进ueditor中
		function loadImgsToUeditor(result, inputId) {
			if (!result || result.length < 1) {
				layer.msg(result.msg, {icon: 7});
				return;
			}
			console.info(result);
			/* var imgUrlArray = result.split(","); */
			let editor = UE.getEditor(inputId);
			for (var i = 0; i < result.length; i++) {
				var imgUrl = result[i];
				editor.execCommand('inserthtml', `<img src=${imgUrl}>`);
			}
		}

		function reLoadCouponList() {
			$('#packageCouponListTable').bootstrapTable('refresh');
		}



		function reLoadProductList() {
			$('#joinProductListTable').bootstrapTable('refresh');
		}

		var row = {};

		function onSelectImgBtnClick(inputId, imgId) {
			layer.open({
				id: 'selectImg',
				type: 2,
				title: '选择图片',
				maxmin: true,
				shadeClose: false,
				area: ['60%', '70%'],
				content: '/platform/config/selectImg/' + inputId + "/" + imgId // iframe的url
			});
		}

		/**
		 * 加载图片URL
		 * @param inputId
		 * @param imgId
		 * @param url
		 */
		function loadImgUrl(inputId, imgId, url) {
			$('#' + inputId + '').val(url);
			$('#' + imgId + '').attr('src', url);
		}


	</script>

</body>
</html>

